<template>
	<view class="body">
		<view class="read" v-for="v in list" v-if="v.plantId==state">
			<view class="reado">延展阅读</view>
			<view class="Fname">{{v.plantName}}</view>
			<view class="author">作者：薇薇 <text>{{v.luchTime}}</text></view>
			<image :src="imageUrl+v.pictureUrl" class="mainimg"></image> 
			<view class="othername">{{v.plantName}}的别称</view>
			<view class="detail" v-if="state!=1&&state!=16">{{v.anotherName}}</view>
			<view class="detail" v-if="state==1">鱼子兰、茶兰</view>
			<view class="detail" v-if="state==16">蓝雏菊、费丽菊、蓝玛格丽特</view>
			<view class="othername">{{v.plantName}}名称的由来 </view>
			<view class="detail">{{v.plantContent}}</view>
		</view>
<view class="comments" >
		<view class="commentitle">
			<text>妙语连珠</text>
		</view>
		<view class="line">
		<view class="lines">
								
		</view>
		</view>
		<view v-for="vq in alist">
		<view >
		<view class="comdetail">
		   <view class="comhead">
			  <image :src="imageUrl1+vq.avatarPath"></image>
			<view >
			<text>{{vq.nickName}}</text>
			<text>{{vq.msgTime}}</text>
			</view>
			</view>
			<view class="icon">
			<view @click="changeheart(vq.msgid)">
				<uni-icons v-if="sta==0" type="heart" size="30" ></uni-icons>
			    <uni-icons v-else type="heart-filled" size="30" ></uni-icons>
			</view>
	        <text>100</text>
			</view>
			</view>
			</view>
			<view class="content">
			<text>{{vq.msgCont}}</text>
			</view>
			</view>
            <view>
				<input type="text" placeholder="说点什么···" v-model="message"  @confirm="addmessage">
			</view>
			</view>
	</view>
</template>
<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				alist:[],
				list:[],
				state:1,
				imageUrl:"http://mnxc.xyz:8080/common/download?name=",
				page:1,
				pageSize:5,
				states:1,
				imageUrl1:"http://mnxc.xyz:8080/common/download?name=",
				sta:0,
                message:'',
				userId:''
			}
		},
		onShow() {
			this.state=uni.getStorageSync('state'),
			this.states=uni.getStorageSync('states')
			this.userId=uni.getStorageSync('userId');
			// console.log(this.states)
			// console.log(this.page)
			this.get();
			this.getcomen()
		},
		methods: {
            addmessage: function(event) {
							if(this.userId == ''){
								uni.showToast({
									title: '请先登录',
									icon: 'none'
								});
								this.message = '';
							}
							else{
								this.message = event.target.value
								// console.log(this.message)
								this.time = this.getTime();
								http({
									url:`/message`,
									method:'post',
									data:{
                                        articleId:this.state,
										msgCont:this.message,
										userId:this.userId,
										msgTime:this.time
									},
									success:(res)=>{
										// console.log(res.data.data);
										this.message = '';
										this.getcomen();
										// console.log(this.alist);
									}
								})
							}
						},
			get(){
				   http({
					   url:'/plant/page',
					   params:{
					   	pageSize:this.pageSize,
					   	page:this.states
					     },
						success:(res)=>{
							 // console.log(res.data.data.records);
							 this.list=res.data.data.records;
							 // console.log(this.list);
						}
				   }) 
			},
			getcomen(){
							http({
								url:`/message/msgPlusByArticleId`,
								params:{
									id:this.states
								},
								success:(res)=>{
									console.log(res.data.data);
									this.alist=res.data.data;
									// console.log(this.alist);
								}
							})
						},
			changeheart(id){
				if(this.sta == 0){
					this.sta = 1
					} else {
					this.sta=0
					}
					},
                    getTime:function(){
							var date = new Date(),
							year = date.getFullYear(),
							month = date.getMonth() + 1,
							day = date.getDate(),
							hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
							minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
							second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
							month >= 1 && month <= 9 ? (month = "0" + month) : "";
							day >= 0 && day <= 9 ? (day = "0" + day) : "";
							var timer = year + '-' + month + '-' + day+ ' ' + hour + ':' + minute + ':' + second;
							return timer;
						},


		}
	}
</script>

<style>
	.body{
		background-color: #eee;
	}
.Fname{
	 font-size: 50rpx;
	 font-weight: 700;
 }
 .author{
	 font-size: 25rpx;
	 margin-top: 20rpx;
	 color: #919191;
 }
 .author text{
	 padding-left: 300rpx;
 }
 .intro{
	 margin-top: 50rpx;
	 padding-bottom: 10rpx;
	 padding-right: 4rpx;
 }
 .intro text{
	 color: #41c20c;
	 font-size: 35rpx;
	 font-weight: 700;
	 padding-right: 5rpx;
 }
 .othername{
	 color: #41c20c;
	 font-size: 40rpx;
	 font-weight: 700;
	 margin-top: 50rpx;
 }
 .mainimg{
	 margin-top: 50rpx;
	 margin-left: 225rpx;
	 width: 300rpx;
	 height: 300rpx;
 }
 .read{
	 border: 1px solid #eee;
	 height: 1400rpx;
	 bottom: 0;
	 background-color: #fff;
 }
 .reado{
	 position: absolute;
	margin-top: 1300rpx;
	margin-left: 320rpx;
	font-size: 39rpx;
	font-weight: 600;
 }
 .title{
	 position: absolute;
     margin-top: 30rpx;
	 margin-left: 320rpx;
	 font-size: 39rpx;
	 font-weight: 600;
 }
 	.comments{
		margin-top: 50rpx;
 		/* position: fixed; */
 		width: 750rpx;
 		background-color: #fff;
 		padding-bottom: 150rpx;
 	}
 	.commentitle{
 		text-align: center;
 	}
 	,.commentitle text{
 		
 	}
 	.line{
 		margin-top: 5rpx;
 		width: 690rpx;
 		height: 4rpx;
 		display: flex;
 		align-items: center;//垂直居中
 		justify-content: center;//水平居中
 		
 	}
 	.line .lines{
 		width: 64rpx;
 		border-bottom: 10rpx solid #41c21c;
 		border-radius: 10rpx;
 	}
 	.comdetail{
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 	}
 	.comhead{
 		display: flex;
 		height: 140rpx;
 		align-items: center;
 	}
 	.comhead image{
 		width: 80rpx;
 		height: 80rpx;
 		border-radius: 50%;
 	}
 	.comhead text:nth-child(1){
 		padding-left: 20rpx;
 		font-size: 30rpx;
 		font-weight: bold;
 		display: block;
 	}
 	.comhead text:nth-child(2){
 		padding-left: 20rpx;
 		font-size: 20rpx;color: #c5c5c5;
 	}
 	.icon{
 		display: flex;
 		height: 140rpx;
 		align-items: center;
 	}
 	.content{
 		margin-left: 80rpx;
 		margin-top: -20rpx;
 		font-size: 25rpx;
 		color: #c9c9c9;
 	}
</style>
